

<template>
  <div>
      Page A. <br>
      <router-link to="/b/page/3/tom" tag="li" >返回PageB</router-link>
      <br/>
      <router-link to="/a/page/a1" >A1</router-link>
      <br/>
      <router-link to="/a/page/a2">A2</router-link>


      <router-view/>

    <demo-a @fullInfoChange="customerMethod" :fullInfo="fullInfo" v-model="fullInfo"/>

    <el-form :inline="true" :model="userInfo" class="demo-form-inline">
      <el-form-item label="姓名">
        <el-input v-model="userInfo.name" placeholder="请输入姓名" clearable />
      </el-form-item>
      <el-form-item label="年龄">
        <el-input v-model="userInfo.age" placeholder="请输入年龄" clearable />
      </el-form-item>


      <el-form-item>
        <el-button type="primary" @click="handlerGetDemoApi">查询用户信息</el-button>
        <el-button type="primary" @click="stopWatch">停止监听用户信息</el-button>
      </el-form-item>
    </el-form>



  </div>
</template>
<script setup>
import {useRoute,useRouter} from 'vue-router'
import {
  ref,
  onMounted,
  onUpdated,
  onBeforeUpdate,
  onBeforeMount,
  onActivated,
  onDeactivated,
  watch,
  computed
} from "vue";
import {getDemoApi} from "../../api/DemoApi.js";
import DemoA from "../demo02/DemoA.vue";


const  route  = useRoute()
const   router  = useRouter()
onBeforeMount(() => {
  console.log('进入了 onBeforeMount')
})
onMounted(() => {
  console.log('进入了 onMounted')

  console.log( 'route.name',route.name)
  console.log('route.path',route.path)
  console.log('route.query',route.query)
  console.log('route.params',route.params)
  console.log('route.fullPath',route.fullPath)
  console.log('route.hash',route.hash)
  console.log('route.meta',route.meta)
  console.log('route.redirectedFrom',route.redirectedFrom)
  console.log('route',route)
  console.log('router',router)
  console.log('router.options.history',router.options.history)

})
onUpdated(()=>{
  console.log('进入了 onUpdated')
})
onBeforeUpdate(()=>{
  console.log('进入了 onBeforeUpdate')
})
onActivated(()=>{
  console.log('进入了 onActivated')
})
onDeactivated(()=>{
  console.log('进入了 onDeactivated')
})
const  userInfo = ref({
  name:'',
  age:''
})
// const fullInfo = ref('')
const watchUserInfo = watch(()=>{
  console.log('进入了 watch')
  return userInfo.value
},(newValue,oldValue)=>{
  console.log('newValue',newValue)
  console.log('oldValue',oldValue)
    // if ( userInfo.value.name &&  userInfo.value.age){
    //   fullInfo.value = `${userInfo.value.name}年${userInfo.value.age}岁了`
    //   console.log('fullInfo',fullInfo.value)
    // }


},{immediate:true,deep:true})

const fullInfo = computed({
  get(){
    console.log('进入了 computed')
    if ( userInfo.value.name &&  userInfo.value.age){
      return `${userInfo.value.name}年${userInfo.value.age}岁了`
      // return userInfo.value.name + '年' + userInfo.value.age + '岁了'
    }
    return null
  },

})

const stopWatch = ()=>{
  console.log('停止监听watchUserInfo()')
  watchUserInfo()
}

const  handlerGetDemoApi = ()=>{
  console.log('进入了 handlerGetDemoApi')
  let query = {
    id :2
  }
  getDemoApi(query).then(res=>{
    console.log('res',res)
    userInfo.value = res.data
  })



}
const customerMethod = (fullInfo)=>{
  console.log('customerMethod被调用了')
  console.log('userInfo',fullInfo)
  // userInfo.value.name = fullInfo.name
  // userInfo.value.age = fullInfo.age
  userInfo.value = fullInfo
}
</script>

<style scoped>
div {
  font-family: Avenir, Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  color: #2c3e50;
  margin-top: 60px;
  background-color: #fafafa;
  font-size: 20px;
}
</style>